<include file="Common:user_head"/>
<style>
    #tb-type th{
        color: #fff;
        background-color: #555;
        border: 1px solid #555;
        vertical-align: top;
    }
    #tb-type th,#tb-type td{
        text-align: center;
    }
    .mline{
        margin-bottom: 10px;
    }
</style>
<div class="container" style="">


    <div class="row" >
        <div class="col-md-12" style="">
            <table id="tb-type" class="table table-bordered table-striped">
                <caption>
                    <button class="btn btn-primary addUser">添加用户</button>
                </caption>
                <thead>
                <tr>
                    <th style="width:10%;">ID</th>
                    <th style="width: 20%">用户名</th>
                    <th style="width: 20%">备注</th>
                    <th style="width: 20%">状态</th>
                    <th style="width: 20%">项目</th>
                    <th style="width: 10%;">操作</th>
                </tr>
                </thead>
                <tbody>
                <volist name="data" id="d">
                    <tr>
                        <td>{$d.id}</td>
                        <td>{$d.username}</td>
                        <td>{$d.remark}</td>
                        <td>{$d.forbid_desc} {$d.edit_permission_desc}</td>
                        <td>{$d.proname}</td>
                        <td>
                            <a class="editUser" data-id="{$d.id}" data-username="{$d.username}" data-remark="{$d.remark}" data-forbid="{$d.forbid}" data-edit_permission="{$d.edit_permission}" data-proid="{$d.proid}">编辑</a>
                            <a class="delUser" data-id="{$d.id}">删除</a>
                        </td>
                    </tr>
                </volist>
                </tbody>
            </table>
        </div>
    </div>

</div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">编辑用户信息</h4>
            </div>
            <div class="modal-body">
                <div class="mline"><label>用户名：</label><input type="text" id="username" class="form-control" placeholder="输入登录用户名"/></div>
                <div class="mline"><label>备注：</label><input type="text" id="remark" class="form-control" placeholder="输入姓名、备注"/></div>
                <div class="mline"><label>状态：</label><label style="margin-right: 10px;"><input type="radio" name="forbid" value="0">正常</label><label><input type="radio" name="forbid" value="1">禁用</label></div>
                <div class="mline"><label>是否可编辑：</label><label style="margin-right: 10px;"><input type="radio" name="edit_permission" value="0">仅查看</label><label><input type="radio" name="edit_permission" value="1">可编辑</label></div>
                <div class="mline"><label>项目：</label><div id="prolist"><label style="margin-right: 10px;"><input type="checkbox" class="procheck nolimit" value="">不限</label><volist name="prolist" id="pro">
                    <label style="margin-right: 10px;"><input type="checkbox" class="procheck" value="{$pro.proid}">{$pro.pro_name}</label>
                </volist></div></div>
            </div>
            <div class="modal-footer">
                <a style="color: #f00;">默认密码：123456</a>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="savebtn" data-id="">保存</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>


<script type="text/javascript">
    $(document).ready(function(){
        //添加
        $('.addUser').click(function () {
            var boxobj=$('#myModal');
            $('#username').val('');
            $('#remark').val('');
            boxobj.find('input[name="forbid"][value="0"]').prop('checked',true);
            boxobj.find('input[name="edit_permission"][value="0"]').prop('checked',true);
            $('#savebtn').attr('data-id','0');
            setCheckPro('');
            boxobj.modal('show');
        });
        //编辑
        $('.editUser').click(function () {
            var id=$(this).attr('data-id');
            var username=$(this).attr('data-username');
            var remark=$(this).attr('data-remark');
            var forbid=$(this).attr('data-forbid');
            var edit_permission=$(this).attr('data-edit_permission');
            var proid=$(this).attr('data-proid');
            var boxobj=$('#myModal');
            $('#username').val(username);
            $('#remark').val(remark);
            boxobj.find('input[name="forbid"][value="'+forbid+'"]').prop('checked',true);
            boxobj.find('input[name="edit_permission"][value="'+edit_permission+'"]').prop('checked',true);
            $('#savebtn').attr('data-id',id);
            setCheckPro(proid);
            boxobj.modal('show');
        });
        
        function setCheckPro(proid) {
            $('.procheck').prop('checked',false);
            if(proid==''){
                $('.procheck.nolimit').prop('checked',true);
            }
            var proidarr=proid.split(',');
            for(var i=0;i<proidarr.length;i++){
                $('.procheck[value="'+proidarr[i]+'"]').prop('checked',true);
            }
        }
        function getCheckPro() {
            if($('.procheck.nolimit').prop('checked')){
                return '';
            }
            var str='';
            $('.procheck').each(function () {
                if($(this).prop('checked')){
                    str+=$(this).val()+',';
                }
            });
            if(str!=''){
                str=str.substr(0,str.length-1);
            }
            return str;
        }
        //提交分类编辑 添加
        $('#savebtn').click(function () {
            var data={
                id:$(this).attr('data-id'),
                username:$('#username').val(),
                remark:$('#remark').val(),
                forbid:$('input[name="forbid"]:checked').val(),
                edit_permission:$('input[name="edit_permission"]:checked').val(),
                proid:getCheckPro()
            };
            $('#waiting').show();
            $.post('{:U("User/saveEdit")}',data,function (ret) {
                if(ret.status==200){
                    window.location.reload();
                }else{
                    alert(ret.message);
                }
                $('#waiting').hide();
            },'json');
        });
        //删除
        $('.delUser').click(function () {
            if(!confirm('确定要删除？')){
                return false;
            }
            $('#waiting').show();
            var thisline=$(this).parent('td').parent('tr');
            $.post('{:U("User/delUser")}',{id:$(this).attr('data-id')},function (ret) {
                if(ret.status==200){
                    thisline.remove();
                }else{
                    alert(ret.message);
                }
                $('#waiting').hide();
            },'json');
        });

        $('.procheck').click(function () {
            if($(this).hasClass('nolimit')){
                $('.procheck').prop('checked',false);
                $(this).prop('checked',true);
            }else{
                $('.procheck.nolimit').prop('checked',false);
            }
        });

    });
</script>

</body>
</html>